Skip to main content

Provider's Waitlist Page

Overview​

The Provider's Waitlist Page is a detailed view used for managing a provider's waitlists, availabilities, and notifications.

Provider's waitlist view

Features​

1. Provider Information Display​

The header section includes:

  • Provider Avatar, Name & Role
  • Search Functionality (handles search queries based on active tab )
  • Filtering Options (options are different based on active tab)
  • Dynamic Action Button (based on active tab, it reveal an action where necessary)

2. Tab-Based Data Management​

The page utilizes a tabbed interface to switch between different datasets:

  • Waitlist: Displays patients currently on the provider's waitlist (useGetProviderWaitlistByIdQuery)
  • Availabilities: Lists available appointment slots (useGetProviderAvailabilitiesQuery)
  • Notifications: Tracks updates related to waitlist actions (useGetProviderNotificationsQuery)

Each tab is dynamically updated with active/open and completed/closed counts.

3. Search and Filter Options per Tab​

  • Waitlist Tab:
    • Search by name or email,
    • Filter by All, Active or Completed status
  • Availabilities Tab:
    • Search by date (MM-DD-YYYY, MMDDYYYY, or MM/DD/YYYY formats) or use the date picker icon to the right of the search bok to pick a date,
    • Filter by All, Active, Completed, or Expired
  • Notifications Tab:
    • Search by patient name
    • Filter by All, Open or Closed

4. Action Buttons per tab​

  • Waitlist Tab:
    • Add Patient button: this opens the CustomWaitlistDrawer which enables the clinic admin to add both existing and new patient's to the waitlist of the provider.
  • Availabilities Tab:
    • Add Availability button: this opens the CustomAvailabilityDrawer which enables the clinic admin to an add availabilities for the provider.
  • Notifications Tab:
    • This has no action button tab

5. Data Tables per tab (DataTable Component)​

  • The Waitlist Tab displays patient information for the provider's waitlist: Each table row shows the following:

Clicking a table row opens CustomViewEntityDrawer with the selected patient's waitlist data.

  • The Availability Tab displays the availabilities of the provider: Each table row shows the following:

    • Date Time: Formatted via formatDateToUTC.
    • Status: Rendered using StatusChip component.
    • Accepted By: Patient info rendered using TablePatient component.
    • Notifications Sent: count of notification sent out from.
    • Action Column: Includes View Notifications, Edit, Delete. Clicking a table row opens CustomViewEntityDrawer with the selected provider availability data.

  • The Notifications Tab displays waitlist notifications sent to patients based on provider availabilities: Each table row shows the following:

    • Patient: Patient info rendered using TablePatient component.
    • Phone Patient phone number to which notification SMS was sent to.
    • Availability Slot The availabity datetime, Formatted via formatDateToUTC, for which the patient was notified.
    • Notified At The datetime formatied via formatDateToUserTimezone, revealing when the SMS was sent out.
    • Status Either open or closed, revealing whether the availability which patients were notified for has been accepted by anyone or not. If a single patient accepts an availability solt, all notifications statuses sent out to other patient for that availability gets closed. Clicking a table row does nothing.

Pagination​

All tables implement pagination via Paginate Component, with options to:

  • Adjust items per page (setitemsPerPage state)
  • Navigate between pages (setPage state)
  • Fetch paginated data using the perPage and page parameters in API calls

SSE (Server-Sent Events)​

The page subscribes to real-time updates via useSSE custom hook, listening to:

  • Waitlist Events: Triggers providersWaitlistRefetch(), refetch(), availabilityRefetch(), and notificationRefetch().
  • Availability Events: Triggers availabilityRefetch() and notificationRefetch()

Summary​

The Provider's Waitlist Page is a React-based, API-driven module with state-managed, real-time updated patient, availability, and notification data. It integrates Redux for state persistence, SSE for real-time notifications, and a modular component structure for extensibility.